<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="pageContent" >
    <style>

        .fileInput{
            margin-top:10px;
            height:120px;
            overflow: hidden;
            font-size:60px;
            position:absolute;
            background-color: #000000;
            right:0;
            top:0;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor:pointer;
        }

    </style>



    <style type="text/css">
        #module_list{margin-left:4px}
        .modules{float:left; width:221px; height:165px; margin:10px; overflow:hidden; border:1px solid #acc6e9; background:#e8f5fe;position:relative;}
        .m_title{height:24px; line-height:24px; background:#afc6e9}
        #loader{height:24px; text-align:center}
        .cl{clear:both}
    </style>




    <form method="post" id="yibutijiao"  onsubmit="return iframeCallback(this, navTabAjaxDone);" enctype="multipart/form-data">

        <div class="container">
            <div id="loader"></div>
            <div id="module_list">
                <c:forEach items="${list}" var="l">
                    <div class="modules" 	 title="">
                        <h3 class="m_title">Module</h3>

                        <input class="fileInput"  type="file" id="${l.indexImageId}" name="photo" onchange="change(this)">
                        <img  class="22"style=" height:141px;" src="image/index/imggif/${l.indexImage}"  />

                    </div>
                </c:forEach>
            </div>
        </div>
        <button id="tijiao" onclick="aaabbb();">提交修改</button>
    </form>
    <script type="text/javascript">
        $(function() {
            $(".m_title").bind('mouseover', function() {
                $(this).css("cursor", "move")
            });

            var $show = $("#loader"); //进度条
            var $list = $("#module_list");

            $list.sortable({
                opacity: 0.6,
                revert: true,
                cursor: 'move',
                handle: '.m_title',
                update: function() {
                    var new_order = [];
                    $("#module_list").find(".22").each(function() {
                        new_order.push($(this).attr("src"));
                    });
                    var newid = new_order.join(',');

                    $("#tijiao").click(function () {

                        /*$.post("indexImage/updateRank",{rank:newid},function (data) {
                            alert("aa");
                            dialogAjaxDoneThis(data);
                           /!* if(data=='success'){
                                alert("更新成功")
                            }else if(data=='fail'){
                                alert("更新失败")
                            }*!/
                        })*/
                        $("#yibutijiao").ajaxSubmit(
                            {type: 'post', // 提交方式 get/post
                                url: 'indexImage/updateRank', // 需要提交的 url
                                data: {
                                    'rank':newid
                                },
                                success:function(data) { // data 保存提交后返回的数据，一般为 json 数据
                                    // 此处可对 data 作相关处理
                                    /* alert('提交成功！');
                                     window.location.href="article/mangerIndex"
                                     $(this).resetForm();*/
                                    dialogAjaxDoneThis(data);
                                }
                            })

                    })
                }
            });
        });
        function change(item) {
            var aa=$(item).attr("id");
            $("#yibutijiao").ajaxSubmit(
                {type: 'post', // 提交方式 get/post
                    url: 'indexImage/updateById', // 需要提交的 url
                    data: {
                        'id': aa
                    },
                    success:function(data) { // data 保存提交后返回的数据，一般为 json 数据
                        // 此处可对 data 作相关处理
                       /* alert('提交成功！');
                        window.location.href="article/mangerIndex"
                        $(this).resetForm();*/
                        dialogAjaxDoneThis(data);
                    }
                })

        }


    </script>



</div>








